<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <title>CSS Gridish</title>
  <meta name="description" content="CSS Gridish takes design specs of your product’s grid and builds out all the resources needed for your team.">
  <meta property="og:title" content="CSS Gridish">
  <meta property="og:description" content="CSS Gridish takes design specs of your product’s grid and builds out all the resources needed for your team.">
  <meta property="og:image" content="./graphics/gridish.png">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://ibm.github.io/css-gridish/">
  <meta name="twitter:card" content="summary_large_image">
  <link href="./examples/carbon/css-gridish/css/bx-grid-legacy.min.css" rel="stylesheet">

  <style>
    body {
      font-family: Helvetica, Arial, sans-serif;
    }

    p,
    li {
      line-height: 1.3;
      margin-top: 0;
      max-width: 20rem;
    }

    a {
      color: inherit;
    }

    a p {
      max-width: 12rem;
    }

    li {
      margin-bottom: .5rem;
    }

    ul {
      list-style: none;
      padding-left: 0;
    }

    .title {
      grid-column: span 12;
      grid-row: span 14;
    }

    .title__logo {
      max-height: var(--bx-height-21, 168px);
      max-width: 459.75px;
      width: 100%;
    }

    .description {
      grid-column: 2 / span 10;
      grid-row: 17 / span 32;
    }

    .link-container--1 {
      grid-column: span 4;
      grid-row: 52 / span 2;
    }

    .link-container--2 {
      grid-column: 7 / span 6;
      grid-row-start: 60;
    }

    .link-container--3 {
      grid-column: span 5;
      grid-row-start: 80;
    }

    .link {
      background: black;
      color: white;
      text-decoration: none;
    }

    .link:hover {
      background: #0064FF;
    }

    .link--1 {
      grid-column: span 4;
      grid-row: span 4;
    }

    .link--2 {
      grid-column: span 6;
      grid-row: span 6;
    }

    .link--3 {
      grid-column: span 5;
      grid-row: span 5;
    }

    @media (min-width: 600px) {
      .link-container--1 {
        grid-row: 18 / span 2;
        grid-column: 10 / span 3;
      }

      .link--1 {
        grid-column: span 3;
        grid-row: span 3;
      }

      .link--2 {
        grid-column: span 5;
        grid-row: span 5;
      }

      .link--3 {
        grid-column: span 4;
        grid-row: span 4;
      }
    }

    @media (min-width: 800px) {
      .description {
        grid-column: 6 / span 6;
        grid-row: 20 / span 32;
      }

      .link-container--1 {
        grid-column: 2 / span 2;
      }

      .link--1 {
        grid-column: span 2;
        grid-row: 3 / span 2;
      }

      .link--2 {
        grid-column: 3 / span 4;
        grid-row: span 4;
      }

      .link--3 {
        grid-column: 2 / span 3;
        grid-row: span 3;
      }
    }

    @media (min-width: 1200px) {
      .description {
        grid-column: 1 / span 6;
        grid-row: 20 / span 32;
      }

      .link-container--1 {
        grid-column: 8 / span 4;
      }

      .link--1 {
        grid-column: span 1;
        grid-row: span 1;
      }

      .link--2 {
        grid-column: 3 / span 3;
        grid-row: span 3;
      }

      .link--3 {
        grid-column: 2 / span 2;
        grid-row: span 2;
      }
    }
  </style>
</head>

<body class="bx-container bx-grid">
  <div class="title">
    <img alt="CSS Gridish" class="title__logo" src="./graphics/gridish_3times.gif">
  </div>
  <section class="bx-padding description">
    <p>CSS Gridish takes design specs of your product’s grid and builds out several resources for your team to use:</p>
    <ul>
      <li>- Sketch file with artboards and grid/layout settings for designers</li>
      <li>- CSS/SCSS code using CSS Grid with a CSS Flexbox fallback for developers</li>
      <li>-
        <a rel="noopener noreferrer" href="https://chrome.google.com/webstore/detail/css-gridish/ebhcneoilkamaddhlphlehojpcooobgc"
          target="_blank">Google Chrome extension</a> for anyone to check a webpage’s alignment</li>
    </ul>
  </section>
  <div class="bx-grid bx-grid--fluid-rows link-container--1">
    <a class="bx-padding link link--1" rel="noopener noreferrer" href="https://github.com/ibm/css-gridish" target="_blank">
      <p>Get started!</p>
    </a>
  </div>
  <div class="bx-grid bx-grid--fluid-rows link-container--2">
    <a class="bx-padding link link--2" rel="noopener noreferrer" href="./examples/material/index.html" target="_blank">
      <p>Check out examples using grid designs from popular design systems.</p>
    </a>
  </div>
  <div class="bx-grid bx-grid--fluid-rows link-container--3">
    <a class="bx-padding link link--3" rel="noopener noreferrer" href="./examples/material/example.html" target="_blank">
      <p>Try this example that uses the CSS Flexbox fallback.</p>
    </a>
  </div>
</body>

</html>